<template>
  <el-container>
    <el-aside width="300px" class="tree-div">
      <DeptTree ref="DeptTree" @fetch-data="deviceSelected"></DeptTree>
    </el-aside>
    <el-main style="padding-top: 0px">
      <div class="roleManagement-container" :style="emptypageshow.flag">
        <el-empty description="请先选择左侧的设备节点"></el-empty>
      </div>
      <div
        class="roleManagement-container"
        :style="realpageshow.flag"
        style="line-height: 30px"
      >
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-light">
              <i class="el-icon-view"></i>
              总览
            </div>
          </el-col>
        </el-row>
        <el-row style="padding-left: 0px; padding-top: 9px">
          <el-col :span="6">
            <div class="">
              <el-card shadow="never">
                <svg class="icon" aria-hidden="true" style="padding-left: 5px">
                  <use xlink:href="#icon-fengsu"></use>
                </svg>
                {{ currentDeviceNode.parentid == '0' ? '产品' : '设备' }}
                ：{{ currentDeviceNode.label }}
              </el-card>
            </div>
          </el-col>
          <el-col :span="6" style="padding-left: 4px">
            <div class="">
              <el-card shadow="never">
                <svg class="icon" aria-hidden="true" style="padding-left: 5px">
                  <use xlink:href="#icon-lixian"></use>
                </svg>
                在线状态：{{ sumpoint.online }}
              </el-card>
            </div>
          </el-col>
          <el-col :span="6" style="padding-left: 4px">
            <div class="">
              <el-card shadow="never">
                <svg class="icon" aria-hidden="true" style="padding-left: 5px">
                  <use xlink:href="#icon-liuliang"></use>
                </svg>
                流量消耗：{{ sumpoint.traffic }}
              </el-card>
            </div>
          </el-col>
          <el-col :span="6">
            <div class=""></div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple">
              <div style="float: left">
                <i class="el-icon-video-camera-solid"></i>
                数据监控
              </div>
              <div style="float: right; text-align: right">
                <el-button
                  type="primary"
                  icon="el-icon-circle-plus"
                  @click="addPointlist()"
                >
                  添加监控数据
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>

        <el-row v-for="(item, index) in devicePointList" :key="index">
          <el-col :span="24">
            <div class="grid-content bg-purple-light">
              <div style="float: left; vertical-align: middle">
                <svg class="icon" aria-hidden="true" style="padding-left: 20px">
                  <use :xlink:href="item.logo"></use>
                </svg>
                {{
                  item.mearpiontdesc === null
                    ? item.tagnumber
                    : item.mearpiontdesc
                }}:{{ item.realdatetxt }}{{ item.symbol }}
                <el-tooltip
                  v-if="item.vartype == '1'"
                  :content="'闭合/断开'"
                  placement="top"
                >
                  <el-switch
                    v-model="item.runstat"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="item.cmd1"
                    :inactive-value="item.cmd2"
                    style="padding-left: 20px"
                    @change="running(item)"
                  ></el-switch>
                </el-tooltip>
              </div>
              <div style="float: right; text-align: right">
                <el-button
                  type="danger"
                  size="mini"
                  round
                  icon="el-icon-delete"
                  @click="handleDelete(item)"
                >
                  删除
                </el-button>
                <el-button
                  type="primary"
                  size="mini"
                  round
                  icon="el-icon-edit"
                  @click="editPoint(item)"
                >
                  编辑
                </el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <ChoosePoint
      ref="ChoosePoint"
      class="aaabb"
      @fetch-data="choosePointOk"
    ></ChoosePoint>
    <EditPointDesc
      ref="EditPointDesc"
      class="editpoint"
      @fetch-data="editpointok"
    ></EditPointDesc>
    <EditPointDescmore
      ref="EditPointDescmore"
      class="editpoint"
      @fetch-data="editpointok"
    ></EditPointDescmore>
  </el-container>
</template>

<script>
  import { loadProDevMonitor, delPoint, devControl } from '@/api/Product'
  import DeptTree from './components/DeptTreeEdit'
  import ChoosePoint from './components/RoleManagementEdit'
  import EditPointDesc from './components/EditPointDesc'
  import EditPointDescmore from './components/EditPointDescmore'
  export default {
    name: 'RoleManagement',
    components: { DeptTree, ChoosePoint, EditPointDesc, EditPointDescmore },
    data() {
      return {
        realpageshow: {
          flag: 'display: none',
          hidden: 'display: none',
          show: 'display: block',
        },
        emptypageshow: {
          flag: 'display: block',
          hidden: 'display: none',
          show: 'display: block',
        },
        list: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          permission: '',
        },
        currentDeviceNode: '',
        devicePointList: [],
        timer: null, // 初始定时器变量名为null
        sumpoint: {},
        cmdstat: '',
      }
    },
    created() {},
    beforeDestroy() {
      //clearInterval(this.timer)
    },
    methods: {
      running(data) {
        //console.log(data.runstat)
        //return
        //(content, title, callback1, callback2)
        this.$baseConfirm('确定要执行当前操作?', null, async () => {
          const { msg } = await devControl({
            discovrid: data.discovrid,
            cmd: data.runstat,
          })
          this.$baseMessage(msg, 'success')
          //this.fetchData()
        })
      },
      cancelcmd(data) {
        if (this.cmdstat == data.cmd1) {
          this.cmdstat = data.cmd2
        } else {
          this.cmdstat = data.cmd1
        }
      },
      editpointok(data) {
        //console.log('editpoint ok')
        this.fetchData()
      },
      editPointmore(row) {
        if (this.currentDeviceNode == '') {
          this.$baseMessage('请先选择左侧设备', 'error')
          return
        }
        //currentDeviceNode.label
        //row.lable= this.currentDeviceNode.lable
        row.lable = this.currentDeviceNode.label
        this.$refs['EditPointDescmore'].showEdit(row)
      },
      editPoint(row) {
        if (this.currentDeviceNode == '') {
          this.$baseMessage('请先选择左侧设备', 'error')
          return
        }
        //currentDeviceNode.label
        //row.lable= this.currentDeviceNode.lable
        row.lable = this.currentDeviceNode.label
        this.$refs['EditPointDesc'].showEdit(row)
      },
      addPointlist() {
        if (this.currentDeviceNode == '') {
          this.$baseMessage('请先选择左侧设备', 'error')
          return
        } else {
          if (this.currentDeviceNode.parentid == '0') {
            this.$baseMessage('请选择左侧设备节点', 'error')
            return
          }
        }
        this.$refs['ChoosePoint'].showEdit({
          deviceId: this.currentDeviceNode['id'],
        })
      },
      choosePointOk(data) {
        this.fetchData()
      },
      deviceSelected(data) {
        this.realpageshow.flag = this.realpageshow.show
        this.emptypageshow.flag = this.emptypageshow.hidden
        this.currentDeviceNode = data
        this.fetchData()
        //this.timer = setInterval(this.fetchData, 5000)
        //window.setInterval(this.fetchData(), 1000)
      },
      setSelectRows(val) {
        this.selectRows = val
      },
      waitConfirm(row) {
        console.log(row)
        if (row) {
          this.$refs['edit'].showEdit(row)
        } else {
          this.$refs['edit'].showEdit()
        }
      },
      handleDelete(row) {
        if (row.dpid) {
          this.$baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await delPoint({ id: row.dpid })
            this.$baseMessage(msg, 'success')
            this.fetchData()
          })
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await loadProDevMonitor({
          devid: this.currentDeviceNode['id'],
        })
        this.devicePointList = data.list
        this.sumpoint = data.sumpoint
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style scoped>
  .tree-div {
    padding: 30px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-row {
    margin-bottom: 2px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<style type="text/css">
  .icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    fill: currentColor;
    overflow: hidden;
  }
</style>
